<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
		    <button id="hideBtn">隐藏</button>
		    <button id="showBtn">显示</button>
		    <button id="toggleBtn">切换</button>
		    <button id="fadeBtn">指定透明度</button>
		
		    <button id="animateBtn">自定义动画</button>
		    <button id="stopBtn">停止</button>
		    <button id="delayBtn">延迟</button>
		</center>
		<br>
		
		<div id="container">
		    <div id="box">
		        <img src="./imgs/6.jpg">
		    </div>
		</div>
		<script type="text/javascript">
			
			$('#hideBtn').click(function(){
				$('#box').hide()//隐藏
				$('#box').hide('fast')
				$('#box').hide('slow')
				$('#box').hide(5000)//隐藏高宽透明度
				$('#box').slideUp(5000)//上滑动 高减到0
				$('#box').fadeOut(5000);// 淡出: 透明度减到0
				
			});
			
			
			$('#showBtn').click(function(){
				$('#box').show()//秒显示
				$('#box').show(50000)//显示高宽透明度
				$('#box').slideDown(50000)//下滑动 高减增加
				
			})
			// 显示/隐藏 切换
			$('#toggleBtn').click(function(){
			    $('#box').toggle(1000);// 高/宽/透明度
			    // $('#box').toggle(2500);// 高/宽/透明度
			    // $('#box').slideToggle(2500);// 上下滑动: 高减增加
			    // $('#box').fadeToggle(1000);// 淡入/出: 透明度增加
			});
			
			
			// 指定透明度
			$('#fadeBtn').click(function(){
			    $('#box').fadeTo(3000, 0.1);
			});
			
			
			// 自定义动画
			$('#animateBtn').click(function(){
			    $('#box img').animate({
			        // 'width': '10px'
			        // 'width': 'toggle'
			        'width': '1200px',
			        'height' : '600px'
			    }, 3000);
			});
			
			// 停止
			$('#stopBtn').click(function(){
			    $('#box img').stop();
			});
			
			// 延迟 / 延时
			$('#delayBtn').click(function(){
			    $('#box').hide(1000).delay(3000).show(1000);
			});
			
			
		</script>
	</body>
</html>
